import {LitElement, html} from "lit";
import Children1 from "./Children1.js";
class MainDemo extends LitElement {
    static properties = {
        model: {
            type: Object,
            reflect: true,
        }
    };

    constructor() {
        super();
        console.log("run constructor");
        this.model = {
            title: "title1",
            auth: {
                authTitle: "auth-title1",
                assignAuth: [
                    {userId: "01", userName: "jwj"},
                    {userId: "02", userName: "zcg"},
                ]
            }
        };

        setTimeout(() => {
            console.log(this);
           this.model = {
               title: "title2",
               auth: {
                   authTitle: "auth-title2",
                   assignAuth: [
                       {userId: "01", userName: "jwj"},
                       {userId: "02", userName: "zcg"},
                   ]
               }
           };
        }, 2000);
    }

    firstUpdated() {
        this.shadowRoot.addEventListener("title-changed", this.handlerTitleChange.bind(this));
    }

    handlerTitleChange(e) {
        console.log("title changed", e, this.model);
        this.model.title = e.detail.title;
        this.model.auth.authTitle = e.detail.authTitle;
        this.requestUpdate();
    }

    render() {
        console.log("render main-demo")
        const {title, auth: {authTitle, assignAuth}} = this.model;
        return html`
            <h2>Main-demo</h2>
            <div class="main">
                ${title}
                <div class="auth">
                    ${authTitle}
                </div>
            </div>
            <children1-demo title="${title}" authTitle="${authTitle}">
                <div slot="default" class="children">
                    <div>
                        <div>aaa</div>
                        <div>bbb</div>
                        <h3>children1</h3>
                    </div>
                </div>
            </children1-demo>
        `
    }

}

customElements.define("main-demo", MainDemo);
export default MainDemo;
